
<script setup>
	import dayjs from 'dayjs';
import { useUserStore } from '@/stores';
	const props=defineProps({
		msgType:Number,
		text:Object
	})
	//处理时间
	const time=dayjs(props.text.createTime).format('HH:mm:ss')
	const store=useUserStore()
</script>

<template>
  <!-- 文字/图片消息 -->
  <view class="message-item" :class="{reverse:props.text.from===store.user.id}">
    <image class="room-avatar" :src="props.text.fromAvatar" />
    <view class="room-message">
      <view class="time">{{time}}</view>
      <view class="text" v-if="props.msgType===1">
        {{props.text.msg.content}}
      </view>
      <image
        v-if="props.msgType===4"
        class="image"
        :src="props.text.msg.picture.url"
        mode="widthFix"
      />
    </view>
  </view>
</template>

<style lang="scss">
.message-item {
  display: flex;
  align-self: flex-start;
  margin-top: 60rpx;

  .room-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .room-message {
    margin-left: 20rpx;
  }

  .time {
    font-size: 26rpx;
    color: #979797;
  }

  .image {
    max-width: 420rpx;
    margin-top: 10rpx;
  }

  .text {
    max-width: 420rpx;
    line-height: 1.75;
    padding: 30rpx 40rpx;
    margin-top: 16rpx;
    border-radius: 20rpx;
    font-size: 30rpx;
    color: #3c3e42;
    background-color: #fff;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: -25rpx;
      width: 26rpx;
      height: 52rpx;
      background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-1.png);
      background-size: contain;
    }
  }

  &.reverse {
    flex-direction: row-reverse;
    align-self: flex-end;

    .room-message {
      margin-left: 0;
      margin-right: 20rpx;
    }

    .time {
      text-align: right;
    }

    .text {
      background-color: #16c2a3;
      color: #fff;

      &::after {
        left: auto;
        right: -25rpx;
        background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-2.png);
      }
    }
  }
}
</style>